import '../../../node_modules/leaflet/dist/leaflet.css'
import React, { useEffect, useRef } from 'react';
import L from "leaflet";
import 'leaflet/dist/leaflet.css';
export default function Index() {
  const mapRef = useRef(null);

  useEffect(() => {
    setTimeout(() => {
      intiMap()
    },5000)
   
  }, []);
  const intiMap = () => {
    // 初始化地图
    const map = new window.L.map('mapDiv', {
      crs: L.CRS.EPSG4326, // 使用EPSG:4326坐标参考系
      center: [39.92, 116.39], // 设置中心点（例如北京）
      zoom: 10, // 设置缩放级别
      attributionControl: false, // 隐藏属性说明控件
    });
    // const map = L.map('map');
    // L.tileLayer(
    //   "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=03cd4b8189df52cc8fba3d9fd345f747"
    // ).addTo(map);
    // L.tileLayer(
    //   "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=03cd4b8189df52cc8fba3d9fd345f747"
    // ).addTo(map);


    // 添加天地图瓦片层
    L.tileLayer(
      'http://t0.tianditu.gov.cn/cva_w/wmts?tk=03cd4b8189df52cc8fba3d9fd345f747&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
      {
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        maxZoom: 20,
        tileSize: 256,
        subdomains: '01234567',
        attribution: '© <a href="http://www.tianditu.gov.cn/">天地图</a>',
      }
    ).addTo(map);
    // // 添加天地图瓦片图层
    // const tileLayerUrl = `https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=03cd4b8189df52cc8fba3d9fd345f747`;
    // const tileLayerUrl1 = 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=03cd4b8189df52cc8fba3d9fd345f747'
    // const tileLayer = L.tileLayer(tileLayerUrl, {
    //   subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    //   maxZoom: 11, // 最大缩放级别
    // }).addTo(map);
 }

  return <div id="mapDiv" ref={mapRef} style={{ height: '700px', width: '1000px',position: 'absolute' }} />;
}